<!-- 纵向项目列表 -->
<template>
  <div>
    <div class="list-container">
      <div class="nav-bar">
        <van-nav-bar title="新品种"
                     left-arrow
                     @click-left="$router.go(-1)"
                     @click-right="$router.push('index')"
                     fixed>
          <template #right>
            <van-icon name="wap-home" />
          </template>
        </van-nav-bar>
      </div>
      <div class="search-wrap">
        <div class="search-fixed">
          <van-search class="search"
                      show-action
                      v-model="searchKey"
                      @search="onSearch">
            <template #action>
              <van-icon name="filter-o"
                        color="#1989fa"
                        size="normal"
                        @click="show = true" />
            </template>
          </van-search>
          <div class="total">
            <span>共（{{total}}）条</span>
          </div>
        </div>
      </div>
      <van-pull-refresh v-model="isreFreshLoading"
                        @refresh="onRefresh"
                        :success-duration="500"
                        :success-text='`刷新成功，加载${items.length} 条记录`'>
        <van-list v-model:loading="loading"
                  v-model:error="error"
                  :finished="finished"
                  finished-text="没有更多了"
                  error-text="请求失败，点击重新加载"
                  @load="load">
          <list-card v-for="(item, index) in items"
                     :key="index"
                     :title="item.name"
                     :rightDescription="item.checkStatus"
                     :linked="true"
                     :leftIconSrc="item.img"
                     :to="{name: 'breedDetail', query: { id: item.id }}">
            <template #content>
              <span>
                <van-icon name="manager" />{{ item.createUserName}}
              </span>
              <span>{{item.createDate}}</span>
              <span>{{item.unitId}}</span>
            </template>
          </list-card>
        </van-list>
      </van-pull-refresh>
    </div>
    <filter-pop @do-search="onSearch"
                beanId='breed'></filter-pop>
  </div>
</template>

<script>
import FilterPop from '@/components/FilterPop.vue'
import { reactive, provide, toRefs, onMounted } from 'vue'
import { usePullRefresh, beforeRouteEnter } from '@/hooks/usePullRefresh.js'
import { getList } from "@/api/request/business"
import ListCard from '@/components/ListCard.vue'

const useFilterPop = function () {
  const filterState = reactive({
    show: false
  })
  return {
    filterState
  }
}
export default {
  beforeRouteEnter,
  components: {
    FilterPop,
    ListCard
  },
  setup () {
    const { filterState } = useFilterPop()
    const { state, load, onRefresh, onSearch, initPullRefresh } = usePullRefresh()

    provide('popState', filterState)
    onMounted(() => {
      initPullRefresh({ request: getList, params: { beanId: 'breed' } })
    })
    return {
      onSearch,
      load,
      onRefresh,
      ...toRefs(filterState),
      ...toRefs(state),

    }
  }
}
</script>

<style scoped>
.ep-card-content span {
  margin-right: 12px;
}
</style>